<template>
	<div>
		<div class="zbian"></div>
		<div class="liebiao">
			<div class='info'>
				<div class='avatar'>
					<img src="../../../image/file17089958290041002e5ff2680cb2e44a086a7a464af940069.jpg" width="100%" />
				</div>
				<div class='text'>
					<div class='name'>啊哈哈哈吧</div>
					<div class='desc'>黑海哈维和花时间家具家电等接口你到家那几你</div>
				</div>
			</div>
			<div class='info'>
				<div class='avatar'>
					<img src="../../../image/file17089958290041002e5ff2680cb2e44a086a7a464af940069.jpg" width="100%" />
				</div>
				<div class='text'>
					<div class='name'>啊哈哈哈吧</div>
					<div class='desc'>黑海哈维和花时间家具家电等接口你到家那几你</div>
				</div>
			</div>
			<div class='info'>
				<div class='avatar'>
					<img src="../../../image/file17089958290041002e5ff2680cb2e44a086a7a464af940069.jpg" width="100%" />
				</div>
				<div class='text'>
					<div class='name'>啊哈哈哈吧</div>
					<div class='desc'>黑海哈维和花时间家具家电等接口你到家那几你</div>
				</div>
			</div>
		</div>
		<div class="ybiang">
			<div class="ltkuan">
				<div class="yhm">用户名</div>
				<div class="jlu"></div>
			</div>
			<div class="srkuan"></div>
		</div>
	</div>
</template>

<script>
</script>

<style>
	.zbian {
		height: 100vh;
		width: 70px;
		background-color: #1196d9;
		float: left;
	}

	.liebiao {
		height: 100vh;
		width: 200px;
		background-color: #ebebeb;
		float: left;
		border-right: 1px solid #9e9e9e;
	}


	.info {
		display: flex;
		height: 60px;
		justify-content: center;
		align-items: center;
		background-color: #ebebeb;
	}

	.info:hover {
		background-color: #bcbcbc;
		cursor: pointer;
	}

	.avatar {
		width: 64px;
	}

	.avatar img {
		width: 40px;
		height: 40px;
		margin-left: 10px;
	}

	.text {
		width: 0;
		flex: 1;
	}

	.desc {
		font-size: 10px;
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-top: 5px;
	}

	.name {
		/* line-height: 15px; */
		margin-top: -10px;
	}

	.ybiang {
		height: 100vh;

		/* float: left; */
		/* background-color: red; */
	}

	.ltkuan {
		height: 79vh;
		border-bottom: 1px solid #9e9e9e;
		/* background-color: red; */
	}

	.srkuan {
		height: 20vh;

	}

	.yhm {
		height: 50px;
		/* background-color: red; */
	}
</style>